<template>
  <div id="top">
    <div class="topboxx">
      <!--蓝色矩形-->
      <div class="topbox"></div>
    </div>

    <div class="text6_">
      <p>团队管理</p>
    </div>

    <div class="biaoqian">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我管理的团队" name="first">
          <div>
            <el-form>
              <table>
                <tr>
                  <td>所属机构</td>
                  <td>
                    <el-select v-model="value1" placeholder="请选择">
                      <el-option
                        v-for="item in options1"
                        :key="item.value1"
                        :label="item.label1"
                        :value="item.value1"
                      >
                      </el-option>
                    </el-select>
                  </td>
                  <td width="300px">
                    <el-input
                      v-model="input2"
                      placeholder="请输入关键字"
                    ></el-input>
                    <i class="el-icon-search biao6" @click="teamsea"></i>
                  </td>
                </tr>
              </table>
            </el-form>
          </div>
          <div >
              <center>
      <!-- 表格 :data="sea.slice((currentPage - 1) * pageSize, currentPage * pageSize)"-->
      <el-table :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"  style="width:1100px">
            <el-table-column
              type="selection"
              :id="list.appointId"
              v-model="list.appointId"
              align="center" 
            >
            </el-table-column>
        <el-table-column prop="team_id"   label="编号"  width="50px"  align="center" 
        ></el-table-column>
        <el-table-column prop="team_img" label="头像" width="90px" align="center" >
          <template v-slot="scope">
                  <img :src="scope.row.team_img" width="70" height="70">
          </template>
        </el-table-column>
        <el-table-column prop="team_name" label="团队名称" align="center" >
        </el-table-column>
        <el-table-column prop="team_captain" label="团队长" :formatter="intorganization" align="center" >
        </el-table-column>
        <el-table-column label="团队标签"  width="200px"  align="center" >
            <el-tag type="danger">高血压</el-tag>
            <el-tag>冠心病</el-tag>
            <el-tag type="warning">高血糖</el-tag>
        </el-table-column>
        <el-table-column prop="team_organization" align="center"  label="所属机构" width="120px" :formatter="intorganization1"  >
        </el-table-column>
        <el-table-column prop="team_count" label="签约人数"  align="center" >
        </el-table-column>
        <el-table-column prop="team_score" label="评分" align="center" >
        </el-table-column>
        <el-table-column  label="状态" align="center" >
            <!-- <template v-slot="scoped"> -->

                 
            <el-switch v-model="flag" active-color="#13ce66"></el-switch>
          <!-- </template> -->
        </el-table-column>
        <el-table-column  label="操作" width="150px" align="center" >
          <!-- <a href="#" class="bianji2">查看详情</a> -->
          <template slot-scope="scope">
              <el-button
                @click="handleClickedit6(scope.row)"
                type="text"
                size="small"
                style="font-size:13px;"
                >查看详情</el-button
              >
              <el-button
                type="text"
                 class="fontred5"
                 @click="jstd(scope.row)"
                size="small"
                style="font-size:13px;"
                >解散退队</el-button
              >
          </template>
        </el-table-column>
         
      </el-table>
     </center>
        <!-- 分页-->
      <center>
        <!-- 分页器 -->
          <div class="block" style="margin-top: 15px">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.length"
            >
            </el-pagination>
          </div>
      </center>
          </div>
        </el-tab-pane>





        <el-tab-pane label="我加入的团队" name="second">
          <div>
            <el-form>
              <table>
                <tr>
                  <td>所属机构</td>
                  <td>
                    <el-select v-model="value1" placeholder="请选择">
                      <el-option
                        v-for="item in options1"
                        :key="item.value1"
                        :label="item.label1"
                        :value="item.value1"
                      >
                      </el-option>
                    </el-select>
                  </td>
                  &nbsp;
                  <td width="300px">
                    <el-input
                      v-model="input2"
                      placeholder="请输入关键字"
                    ></el-input>
                    <i class="el-icon-search biao6"  @click="teamsea"></i>
                  </td>
                </tr>
              </table>
            </el-form>
          </div>
           <div >
              <center>
      <!-- 表格 :data="sea.slice((currentPage - 1) * pageSize, currentPage * pageSize)"-->
      <el-table :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"  style="width:1100px">
            <el-table-column
              type="selection"
              :id="list.appointId"
              v-model="list.appointId"
              align="center" 
            >
            </el-table-column>
        <el-table-column prop="team_id"   label="编号"  width="50px"  align="center" 
        ></el-table-column>
        <el-table-column prop="team_img" label="头像" width="90px" align="center" >
          <template v-slot="scope">
                  <img :src="scope.row.team_img" width="70" height="70">
          </template>
        </el-table-column>
        <el-table-column prop="team_name" label="团队名称" align="center" >
        </el-table-column>
        <el-table-column prop="team_captain" label="团队长" :formatter="intorganization" align="center" >
        </el-table-column>
        <el-table-column label="团队标签"  width="200px"  align="center" >
            <el-tag type="danger">高血压</el-tag>
            <el-tag>冠心病</el-tag>
            <el-tag type="warning">高血糖</el-tag>
        </el-table-column>
        <el-table-column prop="team_organization" align="center"  label="所属机构" width="120px" :formatter="intorganization1"  >
        </el-table-column>
        <el-table-column prop="team_count" label="签约人数"  align="center" >
        </el-table-column>
        <el-table-column prop="team_score" label="评分" align="center" >
        </el-table-column>
        <!-- prop="team_state"  -->
        <el-table-column  label="状态" align="center"  >
            <font class="qiqi">启用中</font>
        </el-table-column>
        <el-table-column  label="操作" width="150px" align="center" >
          <template slot-scope="scope">
              <el-button
                @click="handleClickedit6(scope.row)"
                type="text"
                size="small"
                style="font-size:13px;"
                >查看详情</el-button
              >
              <el-button
                type="text"
                size="small"
                class="fontred5"
                style="font-size:13px;"
                 @click="jstd(scope.row)"
                >解散退队</el-button
              >
          </template>
        </el-table-column>
         
      </el-table>
     </center>
        <!-- 分页-->
      <center>
        <!-- 分页器 -->
          <div class="block" style="margin-top: 15px">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.length"
            >
            </el-pagination>
          </div>
      </center>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>





    <div class="twobtn1">

      <el-button type="primary" @click="adddoctor">新增医生团队</el-button>
      <el-button type="primary"  @click="open">申请加入团队</el-button>
      <el-button type="primary" plain>导出</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080";
export default {
  data() {
    return {
      input2: "",
      list: [],
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页的数据条数
      activeName: 'first',

      options1: [
        {
          value1: "1",
          label1: "陕西省西安市",
        },
        {
          value1: "2",
          label1: "山西省临汾市",
        },
        {
          value1: "3",
          label1: "河北省邯郸市",
        },
      ],
      value1: "", //签约机构
      flag:true
      
      
    };
  },
  created() {
    this.queryjigoulist1();
    document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
  },
  methods: {
    //条查
    teamsea(){
      axios({
        url: "/data/getTeamList",
        method: "GET",
        params:{
          team_organization:this.value1,
          team_name:this.input2
        }
      }).then((res) => {
        this.list = res.data; //把值传到list里面
        console.log(res);
        // alert(this.value1)
        // alert(this.input2)
      });
    },
    //查询
    queryjigoulist1() {
      axios({
        url: "/data/getTeamList",
        method: "GET",
      }).then((res) => {
        this.list = res.data; //把值传到list里面
        console.log(res);
      });
    },
    //团队长
     intorganization(row, column, cellValue, index) {
         if (cellValue ===1){
             return '医生A';
         }else if (cellValue ===2){
             return '医生B';
         }else if (cellValue ===3) {
             return '医生C';
         }
     },
     //所属机构
     intorganization1(row, column, cellValue, index) {
         if (cellValue ===1){
             return '陕西省西安市';
         }else if (cellValue ===2){
             return '山西省临汾市';
         }else if (cellValue ===3) {
             return '河北省邯郸市';
         }
     },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      //   alert(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    //标签页
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClickedit6(row) {
      this.$router.push({
        path:'/datas07',
        query: {
          team_id: row.team_id,
        },
      });
    }
    ,
    //新增
    adddoctor(){
      this.$router.push({
        path:'/datas09',
      })
    }
    ,//删除
     jstd(row) {
       //console.log(row.team_id);
      axios({
                url: "/data/delTeamList",
                method: "POST",
                params:{
                    team_id:row.team_id
                }
            }).then((res) => {
                // this.list = res.data; //把值传到list里面
                // console.log(this.list);
                
                this.$message.success('删除成功')
                this.queryjigoulist1();
            })
    },
    //开弹框
    open() {
        this.$prompt('申请加入团队', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的加入的团队是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
#top {
  width: 1150px;
  height: 750px;
   background: white;
    margin: 20px auto;
  position: relative;
}
.topbox {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.topboxx {
  border-width: 0px;
  position: absolute;
  left: 40px;
  top: 42px;
  width: 6px;
  height: 20px;
}
.text6_{
  position: absolute;
  left: 55px;
  top: 43px;
  font-size: 18px;
}
.elform2 {
  position: absolute;
  top: 150px;
  left: 40px;
}
.twobtn {
  position: absolute;
  top: 110px;
  left: 900px;
}
.mytable1 {
  position: absolute;
  top: 200px;
  left: 40px;
}
.ared {
  color: red;
}
.biaoqian {
  position: absolute;
  top: 80px;
  left: 40px;
}
.sdfd {
  width: 295px;
}
.biao6{
  position: absolute;
  left: 550px;
  top: 15px;
}
.twobtn1{
    position: absolute;
    left: 750px;
    top: 75px;
}
.fontred5{
    color: red;
}
.fontred5:hover{
  color: red;
}
.qiqi{
    color: greenyellow;
}
.bianji2{
  color: blue;
}
</style>